<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
       
        
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：
          <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link>>
          关联的商品
        </div>
        
        <div class="hei10"></div>

        <div class="title">关联的商品</div>
        <div class="basis">
          <div class="list">
            <div class="th bor1">产品名称</div>
            <div class="th bor1">关联在售商品</div>
            <div class="th bor1">商品上下架</div>
            <div class="th">操作</div>
          </div>
          <div class="list">
            <div class="td t1 bor1">{{name}}</div>
            <div class="td t2" v-loading="loading">
              <div class="li" v-for="item in list" :key="item.id">
                <div class="td bor1">{{item.title}}</div>
                <div class="td bor1">{{item.status}}</div>
                <div class="td">
                  <el-button type="text" @click="fixbasis(item.id)">调整关联</el-button>
                </div>
              </div>
            </div>

          </div>

        </div>
        <el-dialog title="调整基础产品" :visible.sync="basislog" width="600px">
          <div>
            <el-radio-group v-model="basis" @change="getallshop">
              <el-radio label="0">调整为我发布的基础产品</el-radio>
              <el-radio label="1">调整为供应商的在售商品</el-radio>
            </el-radio-group>
            <div class="basispro" v-if="basis == 0">
              <el-select v-model="proid" filterable placeholder="请选择产品">
                <el-option v-for="item in prolists" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div class="basispro" v-if="basis == 1">
              <el-select v-model="shopid" filterable placeholder="请选择商品">
                <el-option v-for="item in shoplists" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="basislog = false">取 消</el-button>
            <el-button type="primary" @click="basisgo">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'productionBasis',
    data() {
      return {
        list: "",
        basislog: false,
        basis: '0',
        proid: "",
        chooseid: "",
        prolists: {},

        shopid: "",
        shoplists: {},
        basisshop: "",

        name: "",
        loading: true
      }
    },
    created() {
      this.getlist()
      this.getpros()
      this.name = this.$route.query.name
    },

    methods: {
      basisgo: function() {
        this.loading = true
        var that = this
        if (this.basis == 0) {
          axios.post('/api/plan-market/page/product/update', {
              product_id: this.proid,
              page_id: this.chooseid
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                that.$message.success("修改成功");
                that.getlist()
                that.basislog = false
              } else {
                that.$message.error(response.data.msg.info);
              }
            })
        }
        if (this.basis == 1) {
          axios.post('/api/plan-market/page/product/update', {
              parent_page_id: this.shopid,
              page_id: this.chooseid
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                that.$message.success("修改成功");
                that.getlist()
                that.basislog = false
              } else {
                that.$message.error(response.data.msg.info);
              }
            })
        }
      },
      //获取全部基础产品
      getpros: function() {
        var that = this
        axios.get('/api/gth/products/list?page_size=1000')
          .then(response => {
            if (response.data.msg.code == 0) {
              that.prolists = response.data.data.data
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      getshops: function() {
        //获取商品
        var that = this;
        axios.get('/api/gth/supplier/products?page_size=1000')
          .then(response => {
            if (response.data.msg.code == 0) {
              that.shoplists = response.data.data.data
            } else {
              if (response.data.msg.code == 50401) {
                that.$router.push({
                  path: "/login"
                });
                return false
              }
              that.$message.error(response.data.msg.info);
            }
          })
      },
      getallshop: function() {
        if (this.basis == 0) {
          this.getpros()
        }
        if (this.basis == 1) {
          this.getshops()
        }
      },
      fixbasis: function(id) {
        this.chooseid = id
        this.basislog = true
      },
      getlist: function() {
        axios.get('/api/plan-market/product/pages?product_id=' + this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              for (var i in response.data.data) {
                if (response.data.data[i].status == 0) {
                  response.data.data[i].status = "已下架"
                }
                if (response.data.data[i].status == 100) {
                  response.data.data[i].status = "上架中"
                }
              }
              this.list = response.data.data
              this.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .index {

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .basis {
      margin: 20px;
      border: 1px #EAEAEA solid;
      box-sizing: border-box;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .t1 {
          flex:1;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .t2 {
           flex:3;

          .li {
            display: flex;
            border-bottom: 1px #EAEAEA solid;
          }

          .li:nth-last-child(1) {
            border-bottom: 0px #EAEAEA solid;
          }

          .td {
            flex: 1;
          }
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          box-sizing: border-box;
        }

      }

    }

    .basispro {
      margin-top: 20px;
    }


  }
</style>
